import React, { useState, useEffect } from 'react';
import { Card, Menu, Pagination } from 'antd';
import { PUB_MENU_TYPE_ENUM } from './type';
import { useNavigate } from 'react-router-dom'
import './index.less';

const Publications = () => {
  const navigate = useNavigate();
  const [newsData, setNewsData] = useState<any[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [currentMenu, setCurrentMenu] = useState<PUB_MENU_TYPE_ENUM>(PUB_MENU_TYPE_ENUM.DAIBIAO);
  const itemsPerPage = 10; // 每页显示的新闻数量
  // 菜单 items
  const menuItems = [
    {
      key: PUB_MENU_TYPE_ENUM.DAIBIAO,
      label: '代表性成果'
    },
    {
      key: PUB_MENU_TYPE_ENUM.HUIYI,
      label: '会议报告'
    },
    {
      key: PUB_MENU_TYPE_ENUM.FAMING,
      label: '发明专利'
    },
    {
      key: PUB_MENU_TYPE_ENUM.RUANJIAN,
      label: '软件登记'
    },
    {
      key: PUB_MENU_TYPE_ENUM.CHUBAN,
      label: '出版专著'
    },
    {
      key: PUB_MENU_TYPE_ENUM.RONGYU,
      label: '荣誉奖励'
    },
  ]

  const handleMenuChange = (selectedInfo: any) => {
    console.log('当前选中：', selectedInfo);
    setCurrentMenu(selectedInfo.key);
  }

  // 这里假设你有一个获取新闻数据的函数，例如从API获取
  const fetchNewsData = async (page: any) => {
    // 假设这是API调用的地方
    // const response = await fetch(`https://api.example.com/news?page=${page}`);
    // const data = await response.json();
    // setNewsData(data.newsItems.slice((page - 1) * itemsPerPage, page * itemsPerPage));
    // 为了示例，这里直接使用静态数据
    setNewsData([
      {
        id: '1',
        imgUrl: 'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
        title: '测试研究成果',
        content: '测试新闻内容，这是一段测试的新闻内容，测试的新闻内容可能有很多东西，包括换行符号\n'
      },
      {
        id: '2',
        imgUrl: 'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
        title: '测试研究成果',
        content: '测试新闻内容，这是一段测试的新闻内容，测试的新闻内容可能有很多东西，包括换行符号\n'
      },
      {
        id: '3',
        imgUrl: 'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
        title: '测试研究成果',
        content: '测试新闻内容，这是一段测试的新闻内容，测试的新闻内容可能有很多东西，包括换行符号\n'
      },
      {
        id: '4',
        imgUrl: 'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
        title: '测试研究成果',
        content: '测试新闻内容，这是一段测试的新闻内容，测试的新闻内容可能有很多东西，包括换行符号\n'
      },
      {
        id: '5',
        imgUrl: 'https://img.zcool.cn/community/01ba415dc5087ea801209e1f1da151.jpg@3000w_1l_0o_100sh.jpg',
        title: '测试研究成果',
        content: '测试新闻内容，这是一段测试的新闻内容，测试的新闻内容可能有很多东西，包括换行符号\n'
      } 
    ]);
  };

  useEffect(() => {
    fetchNewsData(currentPage);
  }, [currentPage]);

  return (
    <div className="news-list">
      <div className='news-menu'>
        <Menu
          selectedKeys={[currentMenu]}
          onSelect={(info => handleMenuChange(info))} items={menuItems}>
        </Menu>
      </div>
      <div className="news-cards">
        {newsData.map((newsItem) => (
          <Card
            key={newsItem.id}
            cover={<img alt="example" src={newsItem.imgUrl} />}
            onClick={() => {
              navigate(`/news/detail/${newsItem.id}`)
            }}
          >
            <Card.Meta title={newsItem.title} description={
              <div className="news-card-meta-description">{newsItem.content}</div>
            } />
          </Card>
        ))}
      </div>
      <div className='news-pagination'>
        <Pagination
          current={currentPage}
          total={newsData.length * 10} // 总数应基于真实数据
          pageSize={itemsPerPage}
          onChange={(page) => setCurrentPage(page)}
        />
      </div>
    </div>
  );
};

export default Publications;